.card-detail-container {
  .detail-box {
    padding: 60px 25px 220px;
  }

  .box() {
    width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 32px;
  }

  .first-box {
    min-height: 450px;
    .box();

    .image {
      width: 292px;
      height: 357px;
      background: #4c5055;
      border-radius: 10px;
      position: relative;

      > img {
        width: inherit;
        height: 407px;
        position: absolute;
        top: -50px;
        left: 0;
      }
    }

    .info {
      margin-left: 20px;
      width: 348px;
      font-size: 26px;

      > li {
        height: 26px;
        line-height: 26px;

        > span {
          height: 26px;
          line-height: 26px;
        }
      }

      .card-title {
        font-size: 30px;
        height: 42px;
        line-height: 42px;
      }

      .card-subtitle {
        margin: 4px 0;
      }

      .card-faction {

        .rarity {
          height: 28px;

          > img {
            height: inherit;
          }
        }
      }

      .card-class {
        height: 34px;
        margin: 20px 0;

        > img {
          height: inherit;
        }
      }

      .card-attr {
        height: 42px;
        margin: 40px 0 20px;

        > span {
          padding: 0 25px;
          height: inherit;
          text-align: center;
          line-height: 38px;
          border: 2px solid #1f1f1f;
          border-radius: 10px;
          margin-right: 10px;
        }
      }

      .card-evo {
        height: auto;

        .van-button {
          padding: 0 10px;
        }
      }
    }

    .van-hairline--top {
      margin: 20px 0;

      &::after {
        border-color: #d8d8d8;
      }
    }

    .other-version {
      padding-top: 20px;

      .other-tile {
        >span {
          font-size: 26px;
          height: 26px;
          line-height: 26px;

          &:last-of-type {
            color: #1380f0;
          }
        }
      }

      .ver-list {
        > li {
          padding: 15px 0;
          border-bottom: 1px dashed #cbcbcb;
        }
      }
    }
  }

  .last-box {
    .box();

    margin-top: 20px;

    .rule {
      margin-bottom: 20px;
    }
  }

  .mall {
    position: fixed;
    left: 35px;
    bottom: 43px;
    width: 679px;
    height: 140px;
    background: #fff;
    box-shadow: 0 8px 14px 6px rgb(0 0 0 / 8%);
    border-radius: 19px;

    .price {
      font-size: 32px;
      margin-right: 65px;

      .nums {
        font-size: 34px;

        > span {
          font-size: 24px;
          margin: 0 6px 0 20px;
        }
      }
    }
  }
}
